<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="js/echarts.min.js"></script>
</head>

<body>
    <div id="main" style="width: 600px;height:400px;"></div>
    <script>
        var myChart = echarts.init(document.getElementById("main"));
        var option = {
            title: {
                text: 'iphone 价格走向',
                link: '',
                textStyle: {
                    color: 'blue',
                    fontSize: 20,
                    fontWeight: 'bold'
                },
                subtext: '单价/￥',
                left: 10,
                top: 0
            },
            tooltip: {
                show: true
            },
            legend: {
                data: ['售价', '成本', '利润']
            },
            xAxis: {
                data: ["iphone4", "iphone5", "iphone6", "iphone7", "iphoneX"]
            },
            yAxis: {},
            series: [
                { name: '售价', type: 'bar', data: [5000, 6000, 7000, 9000, 11000] },
                { name: '成本', type: 'bar', data: [2000, 1500, 4000, 2000, 3000] },
                { name: '利润', type: 'bar', data: [3000, 4500, 3000, 7000, 8000] }
            ]
        };
        myChart.setOption(option);
    </script>
</body>

</html>